@import '../mixins/index.scss';

$componentPrefix: initPrefix();
$component: $componentPrefix;
$borders: (top), (right), (bottom), (left);
$border-width: $ft-border-width-df;
$border-width-hairline: $ft-border-width-hairline;

// border-top border-bottom
@each $name in $borders {
  #{$component}border-#{$name} {
    /* #ifdef APP-PLUS-NVUE */
    @include border($directions: $name, $nvue: true, $color: $ft-border-color-df);
    /* #endif */

    /* #ifndef APP-PLUS-NVUE */
    border-#{$name}: $ft-border-width-df $ft-border-style-df $ft-border-color-df;
    /* #endif */
  }

  #{$component}border-#{$name}--hairline {
    /* #ifdef APP-PLUS-NVUE */
    @include border($directions: $name, $nvue: true, $color: $ft-border-color-df, $width: $border-width-hairline);
    /* #endif */

    /* #ifndef APP-PLUS-NVUE */
    border-#{$name}: $border-width-hairline $ft-border-style-df $ft-border-color-df;
    /* #endif */
  }

  #{$component}borders-#{$name} {
    /* #ifdef APP-PLUS-NVUE */
    @include border($directions: $name, $nvue: true, $color: $ft-border-color-df, $width: $ft-border-width-strong);
    /* #endif */

    /* #ifndef APP-PLUS-NVUE */
    border-#{$name}: $ft-border-width-strong $ft-border-style-df $ft-border-color-df;
    /* #endif */
  }

  #{$component}split-#{$name} {
    /* #ifdef APP-PLUS-NVUE */
    @include border($directions: $name, $nvue: true, $color: $ft-border-color-split, $width: $ft-border-width-df);
    /* #endif */

    /* #ifndef APP-PLUS-NVUE */
    border-#{$name}: $ft-border-width-df $ft-border-style-df $ft-border-color-split;
    /* #endif */
  }

  #{$component}splits-#{$name} {
    /* #ifdef APP-PLUS-NVUE */
    @include border($directions: $name, $nvue: true, $color: $ft-border-color-split, $width: $ft-border-width-strong);
    /* #endif */

    /* #ifndef APP-PLUS-NVUE */
    border-#{$name}: $ft-border-width-strong $ft-border-style-df $ft-border-color-split;
    /* #endif */
  }
}

#{$component}border--hairline {
  /* #ifndef APP-NVUE */
  border: $border-width-hairline $ft-border-style-df $ft-border-color-df;
  /* #endif */
  /* #ifdef APP-NVUE */
  border-style: $ft-border-style-df;
  border-width: $border-width-hairline;
  border-color: $ft-border-color-df;
  /* #endif */
}

#{$component}border {
  /* #ifndef APP-NVUE */
  border: $ft-border-width-df $ft-border-style-df $ft-border-color-df;
  /* #endif */
  /* #ifdef APP-NVUE */
  border-style: $ft-border-style-df;
  border-width: $ft-border-width-df;
  border-color: $ft-border-color-df;
  /* #endif */
}

#{$component}borders {
  /* #ifndef APP-NVUE */
  border: $ft-border-width-strong $ft-border-style-df $ft-border-color-df;
  /* #endif */
  /* #ifdef APP-NVUE */
  border-style: $ft-border-style-df;
  border-width: $ft-border-width-strong;
  border-color: $ft-border-color-df;
  /* #endif */
}
